{% extends 'index.html' %}
{% block ace-content %}
<style type="text/css"> 
	td.details-control {
	    background: url('/static/img/details_open.png') no-repeat center center;
	    cursor: pointer;
	}
	tr.shown td.details-control {
	    background: url('/static/img/details_close.png') no-repeat center center;
	} 
</style>	
{% endblock %}
{% block page-content %}
<div id="page-wrapper">
    <div class="row">
         <div class="col-lg-12">
              <h1 class="page-header"><i class="fa  fa-align-justify "></i> 项目列表</h1>
         </div>
                <!-- /.col-lg-12 -->
         
    </div>
	<div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-3">
                                    <i class="fa fa-desktop fa-5x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge">{{totalProject}}</div>
                                    <div>总项目数</div>
                                </div>
                            </div>
                        </div>
                        <a href="#">
                            <div class="panel-footer">
                                <span class="pull-left">View Details</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-green">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-3">
                                    <i class="fa fa-laptop fa-5x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge">{{uatProject}}</div>
                                    <div>生产环境</div>
                                </div>
                            </div>
                        </div>
                        <a href="#">
                            <div class="panel-footer">
                                <span class="pull-left">View Details</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-yellow">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-3">
                                    <i class="fa fa-tablet fa-5x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge">{{qaProject}}</div>
                                    <div>预生产环境</div>
                                </div>
                            </div>
                        </div>
                        <a href="#">
                            <div class="panel-footer">
                                <span class="pull-left">View Details</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-red">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-3">
                                    <i class="fa fa-mobile-phone fa-5x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge">{{sitProject}}</div>
                                    <div>测试环境</div>
                                </div>
                            </div>
                        </div>
                        <a href="#">
                            <div class="panel-footer">
                                <span class="pull-left">View Details</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>
     </div>     
    <div class="row">
         <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            	<i class="fa fa-database"></i>项目列表明细
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover" id="deployTableList">
                                <thead>
                                    <tr>
                                    	<th>详情</th>
                                    	<th>ID</th>
                                    	<th>产品线</th>
                                    	<th>项目名称</th>
                                    	<th>项目环境</th>
                                        <th>仓库目录</th>
                                        <th>仓库地址</th>
                                        <th>激活状态</th>
                                        <th class="text-center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                	{% for ds in deployList %}
                                		<tr class="odd gradeX">
                                			<td></td>
                                			<td>{{ds.id}} </td>
                                			<td>{{ds.project.project_name}} </td>
                                			<td>{{ds.project_name}} </td>
                                			<td>
                                				{% if ds.project_env == 'sit' %}
                                					<span class="label label-success">测试环境</span>
                                				{% elif ds.project_env == 'qa' %}
                                					<span class="label label-warning">预生产环境</span>
                                				{% elif ds.project_env == 'uat' %}
                                					<span class="label label-danger">生产环境</span>
                                				{% endif %}
                                			</td>
                                			<td>
                                				{{ds.project_repo_dir}} 
                                			</td>
                                			<td>{{ds.project_address}} </td>
                                			<td>
                                				{% if ds.project_status == 0 %}
                                					<button  type="button" class="btn btn-outline btn-warning" onclick="initProject(this,'{{ds.project_name}}',{{ds.id}})">未初始化</button>
                                				{% else %}
                                					<button  type="button" class="btn btn-outline btn-success">已初始化</button>
                                				{% endif %}
                                			</td>
                                			<td class="text-center">
                                				<a href="/deploy_mod/{{ds.id}}"><button  type="button" class="btn btn-default"><abbr title="修改资料"><i class="glyphicon glyphicon-edit"></i></button></a>
												{% if ds.project_status == 1 %}
													{% if ds.project_env == 'sit' or ds.project_env == 'qa' %}
														<a href="/deploy_run/{{ds.id}}"><button  type="button" class="btn btn-default"><abbr title="部署"><i class="fa fa-play-circle-o"></i></button></a>   
													{% else %}
														<a href="/order/deploy/apply/{{ds.id}}"><button  type="button" class="btn btn-default"><abbr title="部署申请"><i class="fa fa-play-circle-o"></i></button></a>      
													{% endif %} 
													<a href="/deploy_manage/{{ds.id}}"><button  type="button" class="btn btn-default"><abbr title="版本控制"><i class="fa fa-gear"></i></button></a>  
												{% else %}
													<button  type="button" class="btn btn-default" title="提示"  
														data-container="body" data-toggle="popover" data-placement="top" 
														data-content="请先初始化仓库" data-html="true"><i class="fa fa-play-circle-o"></i></button>
													<button  type="button" class="btn btn-default" title="提示"  
														data-container="body" data-toggle="popover" data-placement="top" 
														data-content="请先初始化仓库" data-html="true"><i class="fa fa-gear"></i></button>      
												{% endif %}      
												
												{% if ds.project_repertory == 'git' %}
												<div class="btn-group-vertical">										
													<div class="btn-group-vertical">
														<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
															<abbr title="分支控制"><i class="fa fa-github"></i>
															<span class="caret"></span>
														</button>
														<ul class="dropdown-menu">
															<li><a href="javascript:" onclick="projcectVersion(this,'branch',{{ds.id}},'create')">创建Branch</a></li>
<!-- 															<li><a href="javascript:" onclick="projcectVersion(this,'tag',{{ds.id}},'create')">创建Tag</a></li> -->
															<li role="presentation" class="divider"></li>
															<li><a href="javascript:" onclick="projcectVersion(this,'branch',{{ds.id}},'delete')">删除Branch</a></li>
															<li><a href="javascript:" onclick="projcectVersion(this,'tag',{{ds.id}},'delete')">删除Tag</a></li>															
														</ul>
													</div>
												</div>  
												{% else %}
													<button  type="button" class="btn btn-default" title="提示"  
														data-container="body" data-toggle="popover" data-placement="top" 
														data-content="敬请期待Svn仓库版本管理功能" data-html="true">&nbsp;<i class="fa fa-github-alt">&nbsp;&nbsp;</i>
													</button>														
												{% endif %}											           				
                                				<button  type="button" class="btn btn-default" onclick="deleteProject(this,{{ds.id}})"><abbr title="删除"><i class="glyphicon glyphicon-trash"></i></button>
                                			</td>
                                		</tr>
                                	{% endfor %}
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                            <div class="well">
                                <h4>项目管理说明</h4>
                                <p>预生产环境与生产环境的代码部署需要审批，测试环境则不需要。</p>
                                <a class="btn btn-default btn-lg btn-block" target="_blank" href="/deploy_add"><i class="fa fa-plus-circle "></i>新建代码部署</a>
                            </div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
    </div>  
<script type="text/javascript">

	function format ( data ) {
		var serHtml = '';
		serList = data["project_number"];
		for  (var i=0; i <serList.length; i++){
			serHtml += serList[i].split(',')[0] + ',';
			var remote_dir = serList[i].split(',')[1]
		}
	    var trHtml = '<tr><td>打包目录:</td><td>'+ data["project_dir"]  + '</td><td>源代码目录:</td><td>'+ data["project_repo_dir"] +'</td></tr>'	;
	    trHtml += '<tr><td>远程命令:</td><td>'+ data["project_remote_command"]  + '</td><td>目标服务器:</td><td>'+ serHtml.substring(0,serHtml.length-1) +'</td></tr>';
	    trHtml += '<tr><td>远程路径:</td><td>'+ remote_dir  + '</td><td>目录宿主:</td><td>'+ data["project_user"] +'</td></tr>';	
	    trHtml += '<tr><td>排除文件:</td><td>'+ data["project_exclude"]  + '</td><td>项目uuid::</td><td>'+ data["project_uuid"] +'</td></tr>';	    
		if (data["project_type"]=='compile'){
			trHtml += '<tr><td>编译类型:</td><td>编译型</td><td>编译命令:</td><td>'+ data["project_local_command"].replace(/\r\n/g,'<br>') +'</td></tr>';	   
		}else{
			trHtml += '<tr><td>编译类型:</td><td>非编译型</td><td>编译命令:</td><td></td></tr>';	   
		}	    
	    var vHtml = '<fieldset>' +
	    			'<legend>'+ data["project_name"] +'部署信息</legend>' +
	    				'<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;word-break:break-all; word-wrap:break-all;">'+
	    				  trHtml  +
	    				'</table>'
				'</fieldset>'; 				
	    return vHtml;
	}	

	$(document).ready(function() {
	    var table = $('#deployTableList').DataTable( {
	/* 	        "ajax": "../ajax/data/objects.txt", */
	        "columns": [
	            {
	                "className":      'details-control',
	                "orderable":      false,
	                "data":           null,
	                "defaultContent": ''
	            },
	            { "data": "id" },
	            { "data": "产品线" },
	            { "data": "项目名称" },
	            { "data": "项目环境"},
	            { "data": "仓库目录" },
	            { "data": "仓库地址" },
	            { "data": "激活状态" },
	            { "data": "操作" }       
	        ],
	        "order": [[2, 'asc']]
	    } );    
	    
	    // Add event listener for opening and closing details
	    $('#deployTableList tbody').on('click', 'td.details-control', function () {
	    	var dataList = [];
	        var tr = $(this).closest('tr');
	        var row = table.row( tr );
	        dbId = row.data()["id"];
	        $.ajax({
	            url : "/api/deploy/"+dbId+"/",
	            type : "GET",
	            async : false,
	            data : {"id":dbId},
	            dataType : "json",
	            success : function(result) {
	            	dataList = result;
	            }
	        });	        
	/* 	    	console.log(dataList); */
	        if ( row.child.isShown() ) {
	            // This row is already open - close it
	            row.child.hide();
	            tr.removeClass('shown');
	        }
	        else {
	            // Open this row
	            row.child( format(dataList) ).show();
	            tr.addClass('shown');
	        }
	    } );
	} );
    
    
    $(function () { 
    	$("[data-toggle='popover']").popover();
    });   
    
	function deleteProject(obj,id){
		var txt=  "是否确认删除？";
		var btnObj = $(obj);
		btnObj.attr('disabled',true);
		var option = {
			title: "删除任务",
			btn: parseInt("0011",2),
			onOk: function(){
				$.ajax({
					  type: 'DELETE',
					  url: '/api/deploy/'+id+'/',
				      success:function(response){	
				    	btnObj.removeAttr('disabled');
	                	window.wxc.xcConfirm("删除成功！", window.wxc.xcConfirm.typeEnum.success);
	                	location.reload('/deploy_list/');				            
				      },
		              error:function(response){
		            	btnObj.removeAttr('disabled');
		            	window.wxc.xcConfirm("删除失败！", window.wxc.xcConfirm.typeEnum.error);	
		              }
					});
			},
			onCancel:function(){	
			},
			onClose:function(){
			}
		}
		window.wxc.xcConfirm(txt, "custom", option);			   
	}    
	
	function initProject(obj,name,id){
		var txt=  "是否确认初始化（"+ name + "）";
		var btnObj = $(obj);
		btnObj.attr('disabled',true);
		var option = {
			title: "初始化项目",
			btn: parseInt("0011",2),
			onOk: function(){
				$.ajax({
					  type: 'POST',
					  url: '/deploy_init/'+id+'/',
				      success:function(response){	
				    	  if (response['code']==200){
						    	btnObj.removeAttr('disabled');
			                	window.wxc.xcConfirm("初始化成功！", window.wxc.xcConfirm.typeEnum.success);	
			                	location.reload('/deploy_list/');
				    	  }
				    	  else{
				            	btnObj.removeAttr('disabled');
				            	window.wxc.xcConfirm("初始化失败，失败原因："+response['msg'], window.wxc.xcConfirm.typeEnum.error);				    		  
				    	  }
		            
				      },
		              error:function(response){
		            	btnObj.removeAttr('disabled');
		            	window.wxc.xcConfirm("初始化失败", window.wxc.xcConfirm.typeEnum.error);	
		              }
					});
			},
			onCancel:function(){	
			},
			onClose:function(){
			}
		}
		window.wxc.xcConfirm(txt, "custom", option);			   
	}	
	
	
	function projcectVersion(obj,model,id,op){
		var btnObj = $(obj);
		btnObj.attr('disabled',true);
		if (op == 'create'){
			txt = "请输入要创建的分支：";
		}
		else{
			txt = "请输入要删除的分支：";
		};
		window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.input,{
			onOk:function(result){
				if (result.length == 0){
					/* 如果没有输入字符串则直接退出 */
					return;
				};
				$.ajax({
					  type: 'POST',
					  url: '/deploy_version/' + id + '/',
					  data: {
						  "model":model,
						  'name':result,
						  'op':op,
					  },
				      success:function(response){	
				    	  
			                if (response["code"]=="200"){ 
			                	window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
			                }
				        	else{
				        		window.wxc.xcConfirm("分支操作错误：" + response["msg"], window.wxc.xcConfirm.typeEnum.error);
				        	};	
			                btnObj.removeAttr('disabled');
					},
		            error:function(response){
		            	btnObj.removeAttr('disabled');
		            	window.wxc.xcConfirm("创建分支失败", window.wxc.xcConfirm.typeEnum.error);
		            },							  
					});
				
			}
		});								   
   }	
	
</script>
{% endblock %}